<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>找回密码</title>
  <script src="https://cdn.staticfile.net/axios/0.18.0/axios.min.js">
  </script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .input-box {
      width: 200px; /* 设置文本框宽度为200像素 */
    }

    #app {
      margin: 10% auto auto;
      height: 180px;
      width: 380px;
    }
  </style>
</head>
<body>
<div id="app">
  <div>
    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
  </div>
  <el-form :model="problem" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="user" prop="name">
      <el-input type="text" v-model="problem.user" class="input-box"></el-input>
    </el-form-item>
    <el-form-item label="你爱我吗" prop="ansewer1">
      <el-input type="JingYuan" v-model="problem.ansewer1" class="input-box"></el-input>
    </el-form-item>
    <el-form-item label="我的昵称" prop="ansewer2">
      <el-input type="KaFuKa" v-model="problem.ansewer2" class="input-box" autocomplete="off">
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="determine()">确定</el-button>
    </el-form-item>
  </el-form>
</div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data() {
      return {
        problem: {
          ansewer1: "",
          ansewer2: "",
          user: ""
        },
        rules: null
      }
    },
    methods: {
      determine() {
        axios
                .get("crud?type=find&ansewer1=" + this.problem.ansewer1 + "&ansewer2=" + this.problem.ansewer2 + "&user=" + this.problem.user)
                .then((response) => {
                    alert(response.data);
                }).catch(function (error) { // 请求失败处理
          console.log(error);
        });
      }
    }
  })
</script>
</html>